<template>
    <el-tooltip content="依赖库加载中" placement="top" v-if="app.dependencyInitializing">
        <div class="flex-v-center text-placeholder">
            <tnxel-icon class="me-1" value="Loading" style="margin-top: 1px;"/>
            <template v-if="clazz">
                <span class="cursor-default" :title="simple ? clazz.getName() : undefined">
                    {{ simple ? clazz.simpleName : clazz.getName() }}
                </span>
                <span v-if="clazz.declaredGenericTypes">&lt;...&gt;</span>
            </template>
            <span v-else-if="classId.length !== 32">{{ classId }}</span>
        </div>
    </el-tooltip>
    <div class="flex-v-center" v-else-if="clazz">
        <NodeIcon class="me-1" style="margin-top: 2px;" :type="clazz.kind.name"/>
        <span v-if="clazz.packageName && !simple">{{ clazz.packageName }}.</span>
        <span :class="{
            link: isOpenableClass(classId),
            'abstract-class-name': clazz.abstractClass
        }"
            :title="simple ? clazz.getName() : undefined"
            @click="openClass(classId)"
        >
            {{ clazz.simpleName }}
        </span>
        <span :title="genericTypesCaption(false)" v-if="clazz.declaredGenericTypes">
            {{ genericTypesCaption(true) }}
        </span>
    </div>
    <el-tooltip content="该类已不存在" placement="top" v-else>
        <div class="flex-v-center text-danger">
            <tnxel-icon value="WarningFilled"/>
            <span class="mx-1 cursor-default">{{ classId }}</span>
            <tnxel-icon class="link" value="Edit" title="修改" @click="toUpdateClass"/>
        </div>
    </el-tooltip>
</template>

<script>
import tnx from '@/tnx.js';
import ModelingApp from '@/logic/modeling/entity/ModelingApp.js';
import ModelingClass from '@/logic/modeling/entity/ModelingClass.js';
import GenerateUtil from '@/logic/modeling/util/generate.js';

import NodeIcon from './NodeIcon.vue';

export default {
    name: 'ClassNameView',
    components: {NodeIcon},
    props: {
        app: {
            type: ModelingApp,
            required: true,
        },
        classId: {
            type: String,
            required: true,
        },
        simple: Boolean,
        openable: {
            type: Boolean,
            default: true,
        },
    },
    emits: ['open-class', 'open-update'],
    data() {
        return {
            clazz: this.getClass(),
        };
    },
    mounted() {
        tnx.app.eventBus.on('app-changed', this.onAppChanged);
    },
    unmounted() {
        tnx.app.eventBus.off('app-changed', this.onAppChanged);
    },
    methods: {
        onAppChanged(appName) {
            if (this.app.name === appName) {
                this.clazz = this.getClass();
            }
        },
        getClass() {
            return this.findClass(this.classId, true);
        },
        genericTypesCaption(simple) {
            return GenerateUtil.generateGenericTypesCaption(this.app, this.clazz.declaredGenericTypes, simple);
        },
        isOpenableClass(classId) {
            if (!this.openable) {
                return false;
            }
            let clazz = this.findClass(classId);
            return clazz instanceof ModelingClass;
        },
        findClass(classId, findInDependencies = false) {
            if (classId) {
                let project = tnx.app.global.modelingProject;
                for (let app of project.apps) {
                    let clazz = app.findClass(classId, findInDependencies, true);
                    if (clazz) {
                        return clazz;
                    }
                }
            }
            return null;
        },
        openClass(classId) {
            if (this.isOpenableClass(classId)) {
                this.$emit('open-class', classId);
            }
        },
        toUpdateClass() {
            this.$emit('open-update');
        },
    }
}
</script>

<style lang="scss">

</style>
